import TagGroup from '@/components/TagGroup';
import { saveMark } from '@/services/api/api-datahub-mark';
import { ProFormDigit, ProFormTextArea } from '@ant-design/pro-components';
import ProForm, { DrawerForm, ProFormText } from '@ant-design/pro-form';
import { Button, message } from 'antd';
import React from 'react';

interface AddMarkProps {
  onRefurbish: () => void;
}
const AddMark: React.FC<AddMarkProps> = ({ onRefurbish }) => {
  return (
    <DrawerForm
      title="新增"
      drawerProps={{
        destroyOnClose: true,
        width: 700,
      }}
      trigger={<Button type="primary">新增</Button>}
      onFinish={async (values) => {
        const response = await saveMark({
          ...values,
        });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
        }
        return true;
      }}
    >
      <ProFormText
        width="xl"
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
      />
      <ProFormDigit
        width="xl"
        name="occurrence"
        label="触发条件"
        min={1}
        max={1000}
        rules={[{ required: true, message: '请输入触发条件' }]}
      />

      <ProFormTextArea name="describes" label="描述" width="xl" placeholder="请输入名称" />
      <ProForm.Item
        label={
          <>
            <span
              style={{
                color: '#ff4d4f',
                fontSize: 14,
                paddingRight: 4,
              }}
            >
              *
            </span>
            命中词
          </>
        }
        name="hits"
        extra={<div>最少输入一个</div>}
      >
        <TagGroup />
      </ProForm.Item>
    </DrawerForm>
  );
};
export default AddMark;
